<template>

        <div id="editor"></div>

</template>

<script>
  import E from 'wangeditor';
  export default {
    name: 'test',
    data() {
      return {
        editor:null,
        msg:"",
      };
    },
    props: {
      value: '',
    },
    mounted() {
      this.initEditor();
    },
    methods:{
      initEditor(){
        this.editor = new E('#editor');
        this.editor.config.menus = [
          'head', // 标题
          'bold', // 粗体
          'fontSize', // 字号
          'fontName', // 字体
          'italic', // 斜体
          'underline', // 下划线
          'strikeThrough', // 删除线
          'foreColor', // 文字颜色
          'backColor', // 背景颜色
          'link', // 插入链接
          'list', // 列表
          'justify', // 对齐方式
          'quote', // 引用
          'emoticon', // 表情
          'image', // 插入图片
          'table', // 表格
          'video', // 插入视频
          'code', // 插入代码
          'undo', // 撤销
          'redo', // 重复
          'fullscreen' // 全屏
        ];
        this.editor.config.onchange = html => {
          this.$emit('input', html);
        };
        this.editor.config.uploadImgServer = 'http://192.168.1.194:8081/seller/uploadDescriptionImage';
        this.editor.config.uploadImgMaxSize = 10 * 1024 * 1024; // 将图片大小限制为 10M
        this.editor.config.uploadFileName = 'descriptionImage'; //后端接受上传文件的参数名
        this.editor.config.uploadImgMaxLength = 1; // 限制一次最多上传 1 张图片
        this.editor.config.showLinkImg = false; //隐藏网络图片上传
        this.editor.config.uploadImgHooks = {
          fail: (xhr, editor, result) => {
            // 插入图片失败回调
            console.log(result);
          },
          success: (xhr, editor, result) => {
            // 图片上传成功回调
            console.log(result);
          },
          timeout: (xhr, editor) => {
            // 网络超时的回调
            console.log('网络超时');
          },
          error: (xhr, editor) => {
            // 图片上传错误的回调
            console.log('上传错误');
          },
          //回显
          customInsert: (insertImg, result, editor) => {
            let url=result.url
            insertImg(url);
          },
        };
        this.editor.config.uploadVideoServer = 'http://192.168.1.194:8081/seller/uploadDescriptionVideo';
        this.editor.config.uploadVideoMaxSize = 5000*1024*1024;
        this.editor.config.uploadVideoName ="descriptionVideo";
        this.editor.config.uploadVideoMaxLength=1;
        this.editor.config.showLinkVideo=false;
        this.editor.config.uploadVideoHooks = {
          fail: (xhr, editor, result) => {
            // 插入图片失败回调
            console.log(result);
          },
          success: (xhr, editor, result) => {
            // 图片上传成功回调
            console.log(result);
          },
          timeout: (xhr, editor) => {
            // 网络超时的回调
            console.log('网络超时');
          },
          error: (xhr, editor) => {
            // 图片上传错误的回调
            console.log('上传错误');
          },
          //回显
          customInsert: (insertVideoFn, result, editor) => {
            let url=result.url
            insertVideoFn(url);
          },
        };

        this.editor.config.height=200;
        this.editor.create();
        this.editor.txt.html(this.value);
      },
      test(){
        let content=this.editor.txt.html();
        console.log(content);
        this.msg=content;
      },
      test2(){
        this.msg="";
      }
    }
  };
</script>

<style scoped>
  #editor{
    width: 13%;
  }
</style>
